<template>
  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="60%" @closed="resetForm">
    <el-form :model="formData" label-width="120px" label-position="left" class="group-form">
      <el-form-item label="管理组名" required>
        <el-input v-model="formData.group_name" />
      </el-form-item>
      <el-form-item label="管理组状态">
        <el-switch v-model="formData.status" :active-value="1" active-text="可用" :inactive-value="0" inactive-text="禁用" />
      </el-form-item>
      <!-- <el-form-item label="管理组样式">
        <dk-type-input v-model="formData.type" />
      </el-form-item> -->
      <el-form-item label="管理组规则">
        <el-tree
          ref="elTree"
          :key="formData.id"
          class="max-h-400px overflow-auto"
          :data="menuOptions"
          :default-checked-keys="formData.menu_ids"
          :default-expanded-keys="formData.half_menu_ids"
          show-checkbox
          :indent="30"
          node-key="id"
          @check="onRulesCheck"
        >
          <template #default="scope">
            <div>
              <el-tag v-if="scope.data.menu_type === 1" size="small">菜单</el-tag>
              <el-tag v-else size="small" type="danger">接口</el-tag>
              <span>{{ scope.data.label }}</span>
            </div>
          </template>
        </el-tree>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getOption } from '@/api/system/menu'
import { getUserGroup, setUserGroup } from '@/api/user'
import emitter from '@/utils/mitt'

defineOptions({
  name: 'DkUserGroupForm'
})

const props = defineProps({
  rowId: {
    default: 0,
    type: Number
  }
})

const dialogFormVisible = ref(false)
const menuOptions = ref([])
const formData = ref({
  id: 0,
  menu_ids: [],
  half_menu_ids: []
})
const elTree = ref(null)

const formTitle = computed(() => {
  if (props.rowId > 0) {
    return '编辑'
  } else {
    return '新增'
  }
})

// 监听选中后触发
const onRulesCheck = (data, row) => {
  formData.value.menu_ids = row.checkedKeys
  formData.value.half_menu_ids = row.halfCheckedKeys
}

// 重置表单
const resetForm = () => {
  formData.value = {
    id: 0,
    menu_ids: [],
    half_menu_ids: []
  }
}

// 获取菜单树
const getMenuOptions = () => {
  // 获取父级菜单
  getOption()
    .then((res) => {
      menuOptions.value = res.data
    })
    .catch((res) => {})
}

// 获取管理组表单
const getUserGroupForm = (rowId = 0) => {
  rowId = rowId || props.rowId
  if (rowId > 0) {
    getUserGroup(rowId)
      .then((res) => {
        formData.value = res.data
        dialogFormVisible.value = true
      })
      .catch(() => {})
  } else {
    dialogFormVisible.value = true
  }
}

// 提交保存
const handleSubmit = () => {
  setUserGroup(formData.value)
    .then((res) => {
      ElMessage.success(res.msg)
      // 替换 this.$parent.getList() 使用事件通知
      emitter.emit('refreshUserGroupList')
      resetForm()
      dialogFormVisible.value = false
      emitter.emit('getMenus')
    })
    .catch((res) => {})
}

onMounted(() => {
  resetForm()
  getMenuOptions()
})

// 暴露方法给父组件使用
defineExpose({
  getUserGroupForm
})
</script>

<style scoped>
/* 使用 unocss 替代原有样式 */
</style>
